<template>
  <v-dialog v-bind="shareStore.modelAttrs.dialogAttr">
    <v-card v-bind="shareStore.modelAttrs.cardAttr">
      <v-card-title>
        <div class="w-full flex justify-between">
          <span>{{ shareStore.modelAttrs.title || '' }}</span>
          <v-icon size="large" icon="mdi-close" @click="closeDialog"></v-icon>
        </div>
      </v-card-title>
      <Transition name="slide-fade" mode="out-in">
        <component :is="shareStore.targetComponent" v-bind="shareStore.modelAttrs.componentAttr"></component>
      </Transition>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
const shareStore = useShareStore()
console.log(shareStore.targetComponent);

const closeDialog = () => {
  if (shareStore.modelAttrs.cardAttr.close) {
    shareStore.modelAttrs.cardAttr.close()
  } else[
    shareStore.visible = false

  ]
}
</script>
<style scoped>
.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

